<template>
  <view class="scrollAllWrap">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallbcak"
      :up="upOption"
      @up="upCallback"
      top="10px"
    >
      <view v-for="(item, index) in orderList" :key="index">
        <view class="order-content">
          <view class="top-content">
            <view class="top-content-status" @click="editMem(item)">修改</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">名字:</view>
            <view class="desc-item-value">{{ item.name || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">联系方式:</view>
            <view class="desc-item-value">{{ item.mobile || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">位置:</view>
            <view class="desc-item-value">{{ item.locAddr || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">代驾费:</view>
            <view class="desc-item-value">{{ item.stationDriverFee || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">是否启用:</view>
            <view class="desc-item-value">{{
              $utils.parDictLabel(isEnableList, item.isEnable) || '否'
              }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">代驾启用:</view>
            <view class="desc-item-value">{{
              $utils.parDictLabel(isEnableList, item.isDjEnable) || '否'
              }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">自驾启用:</view>
            <view class="desc-item-value">{{
              $utils.parDictLabel(isEnableList, item.isZjEnable) || '否'
              }}</view>
          </view>
<!--          <view class="desc-item">-->
<!--            <view class="desc-item-label">排序:</view>-->
<!--            <view class="desc-item-value">{{ item.sort }}</view>-->
<!--          </view>-->
          <view class="desc-item">
            <view class="desc-item-label">坐标:</view>
            <view class="desc-item-value">{{ item.coordinate || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">行政区划:</view>
            <view class="desc-item-value">{{ item.province + '-' + item.city +'-'+item.region}}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">营业日期:</view>
            <view class="desc-item-value">{{ item.officeHours || '--'  }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">营业时间:</view>
            <view class="desc-item-value">{{ item.am +' '+ item.pm }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">普通会员:</view>
            <view class="desc-item-value">{{ item.memPermfee1}}（提成）</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">联盟商:</view>
            <view class="desc-item-value">{{ item.memPermfee2}}（提成）</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">VIP店长:</view>
            <view class="desc-item-value">{{ item.memPermfee3}}（提成）</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">创建日期:</view>
            <view class="desc-item-value">{{ item.gmtTime || '--' }}</view>
          </view>
          <view class="bottom-item">
            <view class="bottom-item-btn" @click="jumpToOrderList(item.id)">订单</view>
            <view class="bottom-item-btn" @click="jumpToDriverList(item.id)">驾驶员</view>
            <view class="bottom-item-btn" @click="jumpToUserList(item.id)">用户</view>
            <view class="bottom-item-btn" @click="jumpToUserAddList(item.id)">新增用户</view>
            <view class="bottom-item-btn" v-if="orderId" @click="confirmzp(item)">指派</view>
            <view class="bottom-item-btn" v-if="driverId" @click="confirmfp(item)">分配</view>
          </view>
        </view>
      </view>
    </mescroll-uni>

    <!--底部-->
    <view class="bottom">
      <view class="bottom_text" @click="show = true">
        <u-icon name="search"></u-icon>
        <text class="search">搜索</text>
      </view>
      <view class="sub">总条目: {{ total }} 条</view>
    </view>
    <!--搜索弹框-->
    <u-popup class="search-popup" v-model="show" width="80%">
      <view class="input">
        <text>名称</text>
        <input
          class="uni-input"
          type="text"
          @input="onNameChange"
          :value="queryForm.name"
          placeholder="请输入检测站名称"
          maxlength="8"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>手机号</text>
        <input
          class="uni-input"
          type="text"
          @input="onMobileChange"
          :value="queryForm.mobile"
          placeholder="请输入负责人手机号"
          maxlength="13"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>是否启用</text>
        <picker
          mode="selector"
          @change="onIsEnableChange"
          :range-key="rangeKey"
          :value="queryForm.isEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, queryForm.isEnable) || '请选择是否启用'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>是否代驾</text>
        <picker
          mode="selector"
          @change="onIsDjEnableChange"
          :range-key="rangeKey"
          :value="queryForm.isDjEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, queryForm.isDjEnable) || '请选择是否代驾'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>是否自驾</text>
        <picker
          mode="selector"
          @change="onIsZjEnableChange"
          :range-key="rangeKey"
          :value="queryForm.isZjEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, queryForm.isZjEnable) || '请选择代驾经验'
            }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="search-warp">
        <view class="search-warp-btn  left" @click="search">
          <u-icon name="search"></u-icon>
          <text class="search">搜索</text>
        </view>

        <view class="search-warp-btn right" @click="reset">
          <u-icon name="reload"></u-icon>
          <text class="search">重置</text>
        </view>
      </view>

      <view class="close-btn" @click="show = false">关闭</view>
    </u-popup>
    <!--弹出框-->
    <view>
      <u-modal
        v-model="showZpOrder"
        content="请确认要指派的检测站和原检测站价格体系一致避免造成不必要的麻烦"
        title="提示"
        show-cancel-button="true"
        @confirm="submitZp"
      ></u-modal>
      <view>
        <u-modal
          v-model="showfp"
          content="您确定要分配给该检测站吗？"
          title="提示"
          show-cancel-button="true"
          @confirm="submitfp"
        ></u-modal>
      </view>
    </view>
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { mapGetters } from 'vuex';
export default {
  mixins: [MescrollMixin],
  onLoad(optData) {
    if (optData && optData.orderId){
      this.orderId = JSON.parse(optData.orderId);
    }
    if (optData && optData.driverId){
      this.driverId = JSON.parse(optData.driverId);
    }
  },
  data() {
    return {
      orderId: '',
      driverId: '',
      rangeKey: 'dictLabel',
      show: false,
      showfp: false,
      showZpOrder: false,
      editpopup: false,
      beginTimePicker: false,
      endTimePicker: false,
      orderList: [],
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        mobile: '',
        isDjEnable: '',
        isEnable: '',
        isZjEnable: '',
      },
      checkedMember: {},
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      genderList: [],
      driverStateList: [],
      experienceList: [],
      isEnableList: [],
      downOption: {
        auto: false, // 是否在初始化后，自动执行downCallback
        autoShowLoading: true, // 显示下拉刷新的进度条
        textColor: '#fff', // 下拉刷新文本颜色
      },
      upOption: {
        auto: false,
        textNoMore: '-- END --',
        empty: {
          use: true,
          tip: '暂无信息',
        },
      },
      checkedzporder:{},
    };
  },
  onShow() {
    this.downCallbcak();
  },
  created() {
    this.fetchGender();
    this.fetchDriverState()
    this.fetchExperience()
    this.fetchIsEnable();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {

    jumpToOrderList(stationId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/order/order-list?stationId=` + stationId,
      });
    },
    jumpToDriverList(stationId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/driver/driver-list?stationId=` + stationId,
      });
    },
    jumpToUserList(stationId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/station/station-user?stationId=` + stationId,
      });
    },
    jumpToUserAddList(stationId) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/station/station-user-add?stationId=` + stationId,
      });
    },

    fetchGender() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'sys_user_sex',
        })
        .then(res => {
          if (res.code === 200) {
            this.genderList = res.data;
          }
        });
    },
    fetchDriverState() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'driver_state',
        })
        .then(res => {
          if (res.code === 200) {
            this.driverStateList = res.data;
          }
        });
    },
    fetchExperience() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'driving_experience',
        })
        .then(res => {
          if (res.code === 200) {
            this.experienceList = res.data;
          }
        });
    },
    fetchIsEnable() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'sys_is_enable',
        })
        .then(res => {
          if (res.code === 200) {
            this.isEnableList = res.data;
          }
        });
    },
    onNameChange(e) {
      this.queryForm.name = e.target.value && e.target.value;
    },
    onEditNameChange(e) {
      this.checkedMember.driverName = e.target.value && e.target.value;
    },
    onMobileChange(e) {
      this.queryForm.mobile = e.target.value && e.target.value;
    },
    onEditMobileChange(e) {
      this.checkedMember.driverMobile = e.target.value && e.target.value;
    },
    onSwitchChange(e) {
      this.queryForm.orderSwitch = this.isEnableList[e.target.value].dictValue;
    },
    onEditSwitchChange(e) {
      this.checkedMember.orderSwitch = this.isEnableList[e.target.value].dictValue;
    },
    onIsEnableChange(e) {
      this.queryForm.isEnable = this.isEnableList[e.target.value].dictValue;
    },
    onIsDjEnableChange(e) {
      this.queryForm.isDjEnable = this.isEnableList[e.target.value].dictValue;
    },
    onIsZjEnableChange(e) {
      this.queryForm.isZjEnable = this.isEnableList[e.target.value].dictValue;
    },
    onEditIsEnableChange(e) {
      this.checkedMember.isEnable = this.driverStateList[e.target.value].dictValue;
    },
    onExperienceChange(e) {
      this.queryForm.experience = this.experienceList[e.target.value].dictValue;
    },
    onEditExperienceChange(e) {
      this.checkedMember.experience = this.experienceList[e.target.value].dictValue;
    },

    onEditRemarkChange(e) {
      this.checkedMember.remark = e.target.value && e.target.value;
    },
    onBeginTimeChange: function(e) {
      this.queryForm.beginTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    onEndTimeChange: function(e) {
      this.queryForm.endTime =
        e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
    },
    downCallbcak() {
      this.$nextTick(() => {
        this.queryForm.pageNum = 1;
        this.orderList = [];
        this.mescroll && this.mescroll.resetUpScroll(true);
      });
    },
    upCallback() {
      this.init();
    },
    search() {
      this.queryForm.pageNum = 1;
      this.orderList = [];
      this.show = false;
      this.init();
    },
    reset() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        mobile: '',
        isDjEnable: '',
        isEnable: '',
        isZjEnable: '',
      };
    },
    init() {
      this.$clApi.haoleiAgentApi
        .fetchStationList({
          data: this.queryForm,
        })
        .then(res => {
          if (res.code === 200) {
            this.queryForm.pageNum++;
            this.orderList = this.orderList.concat(res.rows);
            this.total = res.total;
            let pageSize =
              res.total % this.queryForm.pageSize == 0
                ? res.total / this.queryForm.pageSize
                : Math.ceil(res.total / this.queryForm.pageSize);
            this.mescroll.endSuccess(res.rows.length, pageSize >= this.queryForm.pageNum);
          } else {
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    editMem(item) {
      this.$utils.jumpToOtherPage({
        jumpUrl: `/pages/station/station-add?station=${JSON.stringify(item)}`,
      });
    },
    /*取消编辑*/
    cancelEdit() {
      this.editpopup = false;
    },
    /*免检确定*/
    confirmEdit() {
      this.$clApi.haoleiAgentApi
        .fetchDriverEdit({
          data: this.checkedMember,
        })
        .then(res => {
          if (res.code === 200) {
            this.search();
            this.editpopup = false;
          }
        });
    },
    /** 提交按钮 */
    confirmzp(item) {
      this.showZpOrder = true;
      this.checkedzporder = item;
    },

    /** 提交按钮 */
    confirmfp(item) {
      this.showfp = true;
      this.checkedzporder = item;
    },

    submitZp(){
      this.$clApi.haoleiAgentApi
        .fetchStationZp({
          data: {
            orderId:this.orderId,
            stationId:this.checkedzporder.id
          },
        })
        .then(res => {
          if (res.code === 200) {
            uni.navigateBack();
          }
        });
    } ,
    submitfp(){
      this.$clApi.haoleiAgentApi
        .fetchDriverFp({
          data: {
            driverId:this.driverId,
            stationId:this.checkedzporder.id
          },
        })
        .then(res => {
          if (res.code === 200) {
            uni.navigateBack();
          }
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.scrollAllWrap {
  /*height: calc(100vh - 100rpx);*/
  /*overflow-y: hidden;*/
  min-height: 100vh;
  background-color: #2a3a52;

  .bottom {
    width: 100%;
    text-align: center;
    height: 100rpx;
    color: #ee9a49;
    line-height: 100rpx;
    position: fixed;
    bottom: 0;
    background-color: #2a3a52;
    z-index: 1;
    display: flex;
    .bottom_text {
      flex: 1;
      .search {
        padding: 20rpx;
      }
    }
    .sub {
      flex: 1;
      text-align: center;
      text-align: left;
    }
  }
  /*搜索框样式*/
  .search-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .search-warp {
      display: flex;
      width: 96%;
      margin: 20rpx auto;
      .search-warp-btn {
        width: 96%;
        height: 58rpx;
        line-height: 58rpx;
        border: 1rpx red solid;
        border-radius: 12rpx;
        margin: 20rpx auto;
        text-align: center;
        flex: 1;
        .search {
          margin-left: 20rpx;
        }
      }
      .left {
        margin-right: 5rpx;
        flex: 1;
      }
      .right {
        margin-left: 5rpx;
        flex: 1;
      }
    }
    .close-btn {
      width: 96%;
      height: 58rpx;
      line-height: 58rpx;
      border: 1rpx red solid;
      border-radius: 12rpx;
      margin: 20rpx auto;
      text-align: center;
    }
  }

  .card-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;
      color: #4e6792;
      .placeholder {
        color: #f6f7f9;
      }
      text {
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .button {
      margin: 20rpx;
      text-align: center;
      view {
        display: inline-block;
        width: 161rpx;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        margin-top: 20rpx;
        margin-right: 20rpx;
      }
      .cancel {
        color: #b7c0cf;
        border: 1px solid #b7c0cf;
      }
      .sub {
        background: #ffe471;
        color: #4e6792;
      }
    }
  }
  .order-content:last-child {
    margin-bottom: 100rpx;
  }
  .order-content {
    min-height: 320rpx;
    /*min-height: 100vh;*/
    margin: 5rpx 20rpx;
    padding: 10rpx 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 16px;

    .top-content {
      display: flex;
      height: 56rpx;
      /*margin-bottom: 10rpx;*/
      line-height: 56rpx;
      border-bottom: 1rpx solid #dcdcdc;
      &-type {
        font-size: 36rpx;
        color: #fff;
      }
      &-status {
        font-size: 32rpx;
        color: #ffe471;
        flex: 1;
        text-align: right;
      }
    }

    .desc-item {
      display: flex;
      min-height: 70rpx;
      font-size: 32rpx;
      color: #fff;
      line-height: 70rpx;

      &-label {
        width: 150rpx;
      }
      &-value {
        flex: 1;
        margin-left: 30rpx;
        padding-top: 8px;
        line-height: 40rpx;
      }
    }

    .bottom-item {
      height: 60rpx;
      line-height: 60rpx;
      color: #fff;
      /*margin-top: 20rpx;*/
      &-btn {
        width: 126rpx;
        height: 60rpx;
        line-height: 60rpx;
        float: right;
        border-radius: 35rpx;
        border: 1px solid #ffffff;
        text-align: center;
      }
    }
  }
}
</style>
